<template>
	<view class="uni-container">
		<uni-forms ref="form" :value="formData" validate-trigger="submit" err-show-type="toast" :rules="rules" label-width="80px">
			<uni-forms-item name="content" label="留言内容/回复内容">
				<textarea @input="binddata('content', $event.detail.value)" class="uni-textarea-border"
					v-model="formData.content" trim="right"></textarea>
			</uni-forms-item>
			<uni-forms-item name="image" label="图片列表">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="6"></u-upload>
				<!-- 				<uni-file-picker file-mediatype="image" :limit="6" return-type="array" v-model="formData.image">
				</uni-file-picker> -->
			</uni-forms-item>
			<uni-forms-item name="contactName" label="联系人">
				<uni-easyinput v-model="formData.contactName" trim="both"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="contactPhone" label="联系电话">
				<uni-easyinput v-model="formData.contactPhone" trim="both"></uni-easyinput>
			</uni-forms-item>
			<view class="uni-button-group">
				<button type="primary" class="uni-button" @click="submit">提交</button>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	import {
		saveFeedback
	} from '@/api/feedback.js'
	export default {
		data() {
			return {
				formData: {
					"content": "",
					"image": "",
					"contactName": "",
					"contactPhone": ""
				},
				"fileList1": [],
				rules: {
					// 对name字段进行必填验证
					content: {
						rules: [{
							required: true,
							errorMessage: '请输入留言内容',
						}]
					}
				}
			}
		},
		onReady() {

		},
		methods: {
			/**
			 * 触发表单提交
			 */
			submit() {
				uni.showLoading({
					mask: true
				})
				this.$refs.form.validate().then((res) => {
					console.log('校验通过')
					console.log(res)
					this.submitForm(res)
				}).catch((err) => {
					uni.hideLoading()
				})
			},

			submitForm(value) {
				saveFeedback({
					data: value
				})
				uni.hideLoading()
				uni.showToast({
					icon: 'none',
					title: '反馈成功'
				})
				setTimeout(() => {
					uni.navigateBack();
				}, 2000)

			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.formData.image = JSON.stringify(this.fileList1.map(item => {
					return item.url
				}))
			},
			// 新增图片
			async afterRead(event) {
				// console.log(event)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				console.log(lists)
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				
				this.formData.image = JSON.stringify(this.fileList1.map(item => {
					return item.url
				}))
				

			},
			uploadFilePromise(url) {
				console.log(url)
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: getApp().globalData.baseUrl + '/system/file/admin/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							'content-type': 'multipart/form-data',
							'Token': uni.getStorageSync('Token')
						},
						formData: {
							// path: 'feedback'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data).data)
							}, 1000)
						},
						fail: (err) => {
							console.log(err)
						}
					});
				})
			}
		}
	}
</script>

<style>
	.uni-container {
		padding: 15px;
	}

	.uni-input-border,
	.uni-textarea-border {
		width: 100%;
		font-size: 14px;
		color: #666;
		border: 1px #e5e5e5 solid;
		border-radius: 5px;
		box-sizing: border-box;
	}

	.uni-input-border {
		padding: 0 10px;
		height: 35px;

	}

	.uni-textarea-border {
		padding: 10px;
		height: 80px;
	}

	.uni-button-group {
		margin-top: 50px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
	}

	.uni-button {
		width: 184px;
		padding: 12px 20px;
		font-size: 14px;
		border-radius: 4px;
		line-height: 1;
		margin: 0;
	}
</style>